<template>
    <div id="myCharts" ref="myCharts"></div>
</template>

<script>
import echarts from "echarts";
export default {
    props: {
        options: {
            type: Object,
            default: () => {},
        },
    },

    methods: {
        getData() {
            const myCharts = this.$echarts.init(this.$refs.myCharts);
            let options = {
                title: {
                    text: this.options.title,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: this.options.legend,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                // 可变
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.options.xData,
                },
                yAxis: {
                    type: "value",
                },
                // 可变
                series: [
                    {
                        name: "金额",
                        type: "line",
                        stack: "总量",
                        data: this.options.priceData,
                    },
                    {
                        name: "订单数量",
                        type: "line",
                        stack: "总量",
                        data: this.options.orderAmount,
                    },
                    {
                        name: "订单数量",
                        type: "line",
                        stack: "总量",
                        data: this.options.orderData,
                    },
                ],
            };
            myCharts.setOption(options);
        },
    },
    mounted() {
        this.getData();
    },
};
</script>

<style lang="less" scoped>
#myCharts {
    margin-top: 20px;
    width: 100%;
    height: 400px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
}
</style>